<template>
  <div style="display:flex;flex-direction:column">
    <div
      style="border: 2px solid skyblue;margin: 20px auto;width:20%;text-align:center;font-size:40px;background:skyblue"
    >学生管理</div>
    <div style="margin:10px">
      <el-select
        class="selectVaule"
        v-model="params.queryParams"
        @change="studentAllGradeShow"
        type="text"
        style="width:300px;height:35px;margin-left:75%;"
        placeholder="请选择班级"
      >
        <el-option
          v-for="item in options"
          :key="item.label"
          :label="item.value"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div
      style="text-align:center;font-size:30px;font-weigth;bold;margin:30px 0;"
    >{{params.queryParams}}成绩可视化</div>
    <div style="width:100%;margin:10px 0">
      <table style="width:100%;height:60%;border-collapse:collapse;">
          <thead>
            <tr>
              <th>项目</th>
              <th>math</th>
              <th>Python</th>
              <th>Web</th>
              <th>Java</th>
              <th>dataVisual</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>平均成绩</td>
              <td>{{tiaoXinTuData.shuData[0]}}</td>
             <td>{{tiaoXinTuData.shuData[1]}}</td>
             <td>{{tiaoXinTuData.shuData[2]}}</td>
             <td>{{tiaoXinTuData.shuData[3]}}</td>
             <td>{{tiaoXinTuData.shuData[4]}}</td>
            </tr>
            <tr>
              <td>不及格人数</td>
              <td>{{noPassNum[0]}}</td>
              <td>{{noPassNum[1]}}</td>
              <td>{{noPassNum[2]}}</td>
              <td>{{noPassNum[3]}}</td>
              <td>{{noPassNum[4]}}</td>
            </tr>
            <tr>
              <td>良好人数</td>
              <td>{{goodGradeNum[0]}}</td>
              <td>{{goodGradeNum[1]}}</td>
              <td>{{goodGradeNum[2]}}</td>
              <td>{{goodGradeNum[3]}}</td>
              <td>{{goodGradeNum[4]}}</td>
            </tr>
            <tr>
              <td>优秀人数</td>
              <td>{{goodsNum[0]}}</td>
              <td>{{goodsNum[1]}}</td>
              <td>{{goodsNum[2]}}</td>
              <td>{{goodsNum[3]}}</td>
              <td>{{goodsNum[4]}}</td>
            </tr>
            <tr>
              <td>及格人数</td>
              <td>{{goodGradeNum[0]+goodsNum[0]}}</td>
              <td>{{goodGradeNum[1]+goodsNum[1]}}</td>
              <td>{{goodGradeNum[2]+goodsNum[2]}}</td>
              <td>{{goodGradeNum[3]+goodsNum[3]}}</td>
              <td>{{goodGradeNum[4]+goodsNum[4]}}</td>
            </tr>
          </tbody>
        </table>
    </div>
    <div style="width:100%;margin:10px 0">
      <div id="gradeTiaoXinTu" style="width:55%;height:400px;margin:10px;float:left;"></div>
      <div style="float:right;margin:10px;height:400px;width:35%;">
        <h2 style="text-align:center">课程及格情况表</h2>
        <table style="width:100%;height:60%;border-collapse:collapse;">
          <thead>
            <tr>
              <th>项目</th>
              <th>MIN</th>
              <th>分数</th>
              <th>MAX</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="color:red">不及格</td>
              <td>0</td>
              <td>------</td>
              <td>59</td>
            </tr>
            <tr>
              <td style="color:orange">良好</td>
              <td>60</td>
              <td>------</td>
              <td>79</td>
            </tr>
            <tr>
              <td style="color:green">优秀</td>
              <td>80</td>
              <td>------</td>
              <td>100</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div style="width:100%;margin:10px 0;display:flex;direction:row">
      <div id="gradeBingTuNoPass" style="height:400px;width:33%;"></div>
      <div id="gradeBingTuGoodGrade" style="height:400px;width:33%;"></div>
      <div id="gradeBingTugoods" style="height:400px;width:33%;"></div>
    </div>
  </div>
</template>

<script>
import * as ECharts from "echarts";
export default {
  name: "gradeShowAll",
  data() {
    return {
      options: [],
      params: {
        queryParams: sessionStorage.getItem("grade")
      },
      getStudentAllGradeShowlist: [],
      StudentAllGradeShowOptions: [],
      tiaoXinTuData: {
        hengData: [],
        shuData: []
      },
      noPass: [],
      goodGrade: [],
      goods:[],
      noPassNum:[],
      goodGradeNum:[],
      goodsNum:[]
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      await this.getAllStudentInfo();
      await this.studentAllGradeShow();
    },
    async getAllStudentInfo() {
      try {
        const res = await this.$API.call("/getAllStudentInfo1", "get");
        this.StudentAllGradeShowOptions = res.data
          .map(item => item["grade"])
          .filter(
            (grade, index) =>
              res.data.map(item => item["grade"]).indexOf(grade) === index
          );
        this.options = this.StudentAllGradeShowOptions.map((grade, index) => ({
          value: grade,
          label: "选项" + (index + 1)
        }));
      } catch (err) {
        console.log(err);
      }
    },
    async studentAllGradeShow() {
      try {
        const res = await this.$API.call(
          "/getStudentAllGradeShow",
          "get",
          this.params,
          ""
        );
        this.getStudentAllGradeShowlist = res.data.map(item => {
          return Object.fromEntries(
            Object.entries(item).filter(
              ([key, value]) => typeof value === "number"
            )
          );
        });
      } catch (err) {
        console.log(err);
      }

      //条形图
      const totalNnum = { math: 0, Python: 0, Web: 0, Java: 0, dataVisual: 0 };
      this.getStudentAllGradeShowlist.forEach(item => {
        totalNnum.math += item.math;
        totalNnum.Python += item.Python;
        totalNnum.Web += item.Web;
        totalNnum.Java += item.Java;
        totalNnum.dataVisual += item.dataVisual;
      });
      totalNnum.math /= this.getStudentAllGradeShowlist.length;
      totalNnum.Python /= this.getStudentAllGradeShowlist.length;
      totalNnum.Web /= this.getStudentAllGradeShowlist.length;
      totalNnum.Java /= this.getStudentAllGradeShowlist.length;
      totalNnum.dataVisual /= this.getStudentAllGradeShowlist.length;
      this.tiaoXinTuData.shuData = [
        totalNnum.math,
        totalNnum.Python,
        totalNnum.Web,
        totalNnum.Java,
        totalNnum.dataVisual
      ];
      this.tiaoXinTuData.hengData = Object.keys(
        this.getStudentAllGradeShowlist[0]
      );
      const gradeTiaoXinTu = ECharts.init(
        document.getElementById("gradeTiaoXinTu")
      );
      gradeTiaoXinTu.setOption({
        title: {
          show: true,
          text: "班级学课平均成绩",
          textStyle: {
            fontStyle: "italic",
            fontSize: 20
          },
          x: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.tiaoXinTuData.hengData,
            axisTick: {
              alignWithLabel: "auto"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "平均成绩",
            type: "bar",
            barWidth: "40%",
            data: this.tiaoXinTuData.shuData
          }
        ]
      });
      window.addEventListener("resize", () => gradeTiaoXinTu.resize());

      //饼图1
      const noPassList = {};
      Object.keys(this.getStudentAllGradeShowlist[0]).forEach(subject => {
        noPassList[subject] = 0;
      });
      this.getStudentAllGradeShowlist.forEach(item => {
        Object.entries(item).forEach(([subject, grade]) => {
          if (grade < 60) {
            noPassList[subject]++;
          }
        });
      });
      this.noPass = Object.entries(noPassList).map(([subject, grade]) => ({
        value: grade,
        name: subject
      }));
      const gradeBingTuNoPass = ECharts.init(
        document.getElementById("gradeBingTuNoPass")
      );
      gradeBingTuNoPass.setOption({
        title: {
          text: "不及格人数",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "不及格人数",
            type: "pie",
            radius: "40%",
            data: this.noPass,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      window.addEventListener("resize", () => gradeBingTuNoPass.resize());
      this.noPassNum = this.noPass.map(item => item.value)

      //饼图2
      const goodGradeList = {};
      Object.keys(this.getStudentAllGradeShowlist[0]).forEach(subject => {
        goodGradeList[subject] = 0;
      });
      this.getStudentAllGradeShowlist.forEach(item => {
        Object.entries(item).forEach(([subject, grade]) => {
          if (grade <= 79 && grade >=60) {
            goodGradeList[subject]++;
          }
        });
      });
      this.goodGrade = Object.entries(goodGradeList).map(([subject, grade]) => ({
        value: grade,
        name: subject
      }));
      const gradeBingTuGoodGrade = ECharts.init(
        document.getElementById("gradeBingTuGoodGrade")
      );
      gradeBingTuGoodGrade.setOption({
        title: {
          text: "良好人数",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "良好人数",
            type: "pie",
            radius: "40%",
            data: this.goodGrade,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      window.addEventListener("resize", () => gradeBingTuGoodGrade.resize());
      this.goodGradeNum = this.goodGrade.map(item => item.value)

      //饼图3
      const goodsList = {};
      Object.keys(this.getStudentAllGradeShowlist[0]).forEach(subject => {
        goodsList[subject] = 0;
      });
      this.getStudentAllGradeShowlist.forEach(item => {
        Object.entries(item).forEach(([subject, grade]) => {
          if (grade <= 100 && grade >=80) {
            goodsList[subject]++;
          }
        });
      });
      this.goods = Object.entries(goodsList).map(([subject, grade]) => ({
        value: grade,
        name: subject
      }));
      const gradeBingTugoods = ECharts.init(
        document.getElementById("gradeBingTugoods")
      );
      gradeBingTugoods.setOption({
        title: {
          text: "优秀人数",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "优秀人数",
            type: "pie",
            radius: "40%",
            data: this.goods,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      window.addEventListener("resize", () => gradeBingTugoods.resize());
      this.goodsNum = this.goods.map(item => item.value)
    }
  }
};
</script>

<style lang='less' scoped>
table td,
table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  background-color: skyblue;
}
</style>